<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<div>
			<img src="img/big1.png" id="q">
		</div>
		<script type="text/javascript" src="js/jquery-3.1.1.js" ></script>
		<script>
			//页面加载时将图片定位
			//1.获取屏幕大小
			//2.获移动物品大小
			
			
			
			
			window.onload=init;
			
			function init(){
				var pic = document.getElementById("q");
				var widthw = document.body.clientWidth;
				var widthh = document.body.clientHeight;
//				alert(widthh);
				//alert(widthw);
				var widthtu = document.getElementById("q").clientWidth;
				var heighttu = document.getElementById("q").clientHeight;
				
				//alert(widthtu);
				pic.style.position = "absolute";
			
				pic.style.bottom =  widthh - heighttu + "px";
				tuleft = widthtu;
			 	tubottom = widthh - heighttu;
				
				window.setInterval("move()",500);
			
			}
				//让图片以每秒20xp向右上位移
				var tuleft = 0;
				var tubottom =0;
				function move(){
					
					if(tubottom==1000+"px"){
						
						tubottom = widthh - heighttu;
					}
				    var pic = document.getElementById("q");
					tuleft+=10;
					tubottom +=40;
					pic.style.left = (Math.random()*80+tuleft) + "px";
					pic.style.bottom =  tubottom +"px" ;
					
					
				}
				
			
		</script>
	</body>
</html>
